<!--**
* @author: SEKin
* @Date: 2024-11-04
* @description:
* @Last Modified time:
*-->
<template>
  <!--备注-->
  <Scroll height="500px">
    <Form layout="vertical" class="from-box">
      <div class="wrap-title" style="margin-bottom: 1em">
        <img class="title-img" :src="getImgSrc('title-basic.png')" />
        <span class="title-name">基本属性</span>
      </div>
      <div style="padding-left: 1.5em">
        <div class="flex-row">
          <FormItem
            label="名称"
            name="name"
            class="inp-require"
            :class="{ unfill: !infoModel.name }"
          >
            <Input
              v-model:value="infoModel.name"
              allowClear
              style="width: 300px"
            />
          </FormItem>

          <FormItem
            label="el前缀"
            name="elPrefix "
            class="inp-require flex1"
            :class="{ unfill: !infoModel.elPrefix }"
          >
            <Input v-model:value="infoModel.elPrefix" allowClear />
          </FormItem>

          <FormItem
            label="业务类型"
            name="businessType"
            class="inp-require flex1"
            :class="{ unfill: !infoModel.businessType }"
          >
            <Select
              show-search
              :bordered="true"
              option-filter-prop="name"
              v-model:value="infoModel.businessType"
              placeholder="业务类型"
            >
              <SelectOption
                v-for="item in tagList.elBusinessTypeArr"
                :key="item.code"
                :value="item.code"
                :title="item.custom"
              >
                {{ item.name }}
              </SelectOption>
            </Select>
          </FormItem>
        </div>

        <FormItem label="描述" name="description">
          <Textarea
            v-model:value="infoModel.description"
            allow-clear
            show-count
          />
        </FormItem>
      </div>

      <div class="wrap-title" style="margin-bottom: 1em">
        <img class="title-img" :src="getImgSrc('title-manage.png')" />
        <span class="title-name">技术属性</span>
      </div>
      <div style="padding-left: 1.5em">
        <div class="flex-row">
          <FormItem
            label="el类型"
            name="elType "
            class="inp-require"
            style="flex-shrink: 0"
            :class="{ unfill: !infoModel.elType }"
          >
            <Select
              :options="tagList.elTypeArr"
              show-search
              :bordered="true"
              :field-names="{ label: 'name', value: 'code' }"
              option-filter-prop="name"
              v-model:value="infoModel.elType"
              placeholder="el类型"
              @change="changeElType"
              style="width: 300px"
            />
          </FormItem>

          <FormItem
            label="路由名称"
            name="methodName"
            v-if="infoModel.elType != aceModeObj.sql"
            class="inp-require flex1"
            :class="{ unfill: !infoModel.methodName }"
          >
            <Select
              :options="tagList.ruleRouteArr"
              show-search
              :bordered="true"
              :field-names="{ label: 'name', value: 'code' }"
              option-filter-prop="name"
              v-model:value="infoModel.methodName"
            />
          </FormItem>
          <FormItem
            label="选定的数据源"
            v-if="infoModel.elType == aceModeObj.sql"
            :class="{ unfill: !infoModel.dataSource }"
            name="dataSource"
            class="flex1 inp-require"
          >
            <Select
              :options="stateData.dataSoureData"
              show-search
              :bordered="true"
              :field-names="{ label: 'name', value: 'name' }"
              option-filter-prop="name"
              v-model:value="infoModel.dataSource"
            />
          </FormItem>
        </div>
        <FormItem
          label="FreeMarker模板 SQL"
          name="freemarkerTemplate"
          v-if="info.elType == aceModeObj.sql"
          :class="{
            unfill:
              !infoModel.freemarkerTemplate &&
              infoModel.elType == aceModeObj.sql,
            'inp-require': infoModel.elType == aceModeObj.sql,
          }"
        >
          <AceEditor
            class="ace-wrap"
            v-model="infoModel.freemarkerTemplate"
            :mode-str="aceModeObj[infoModel.elType as 'java']"
          />
        </FormItem>
        <ParaKeyValue
          :data="infoModel.elParams"
          :rule-id="curNode?.id"
          is-el-params
        />
        <ParaKeyValue :data="infoModel.paramParams" :rule-id="curNode?.id" />

        <div style="display: flex">
          <FormItem label="是否使用缓存：" name="useCache">
            <Switch
              v-model:checked="infoModel.useCache"
              checked-children="启用"
              un-checked-children="禁用"
              :checked-value="1"
              :un-checked-value="0"
            />
          </FormItem>
          <FormItem
            label="缓存失效时间（秒）"
            v-if="infoModel.useCache == 1"
            name="cacheTtl"
            class="inp-require"
            style="margin-left: 2em"
            :class="{ unfill: !infoModel.cacheTtl }"
          >
            <Input
              v-model:value="infoModel.cacheTtl"
              allowClear
              type="number"
            />
          </FormItem>
        </div>
      </div>
    </Form>
  </Scroll>
</template>
<script setup lang="ts">
import {
  FormItem,
  Form,
  Input,
  Switch,
  Select,
  Textarea,
  SelectOption,
} from 'ant-design-vue';
import { IRuleInfoNode, IRuleNode } from 'apis/src/users/rule';
import { computed, reactive } from 'vue';
import type { ISourceNode } from 'apis/src/users/dataSource';
import Scroll from 'components/src/su-scrollbar/index.vue';
import AceEditor from 'components/src/su-aceEditor/index.vue';
import SApi from 'apis/src/users/dataSource';
import { getImgSrc } from '../../../imgSrc';
import ParaKeyValue from './ParaKeyValue.vue';
import type { IParameter } from 'apis/src/users/common';

/**
 *@description 常数区
 */

const aceModeObj = {
  java: '1',
  sql: '2',
  1: 'java',
  2: 'sql',
} as const;
/**
 *@description 属性定义区
 */
type Props = {
  info: IRuleInfoNode;
  show: boolean;
  curNode?: IRuleNode;
  tagList: {
    elTypeArr: IParameter[];
    elBusinessTypeArr: IParameter[];
    ruleRouteArr: IParameter[];
  };
};
const props = defineProps<Props>();
const infoModel = computed(() => {
  const info = props.info;
  if (!props.info.elParams) {
    info.elParams = [];
  }
  if (!props.info.paramParams) {
    info.paramParams = [];
  }
  return props.info;
});

/**
 *@description 状态保存区
 */

type State = {
  dataSoureData: ISourceNode[];
};
const stateData = reactive<State>({
  dataSoureData: [],
});
SApi.list().then((res) => {
  stateData.dataSoureData = res.data;
});
/**
 *@description 方法区
 */

/**
 *@description 数据变更区
 */

const changeElType = () => {
  const elType = props.info.elType;
  const curNode = props.curNode;
  infoModel.value.freemarkerTemplate = curNode?.freemarkerTemplate || '';
  infoModel.value.dataSource = curNode?.dataSource || '';
  infoModel.value.methodName = '';
  infoModel.value.elParams = JSON.parse(
    JSON.stringify(curNode?.elParams || [])
  ) as Props['info']['elParams'];
  infoModel.value.paramParams = JSON.parse(
    JSON.stringify(curNode?.paramParams || [])
  ) as Props['info']['paramParams'];
  if (elType == aceModeObj.sql) {
    infoModel.value.methodName = 'SqlTemplateRule';
  }
};

/**
 *@description 组件导出区
 */
</script>
<style lang="scss" scoped>
.flex-row {
  display: flex;
  justify-content: space-between;
}
.flex1 {
  flex: 1;
  margin-left: 1em;
  overflow: hidden;
}

.from-box {
  padding: 0 2em;
}

.unfill {
  .ace-wrap {
    border-color: red;
  }
}

.ace-wrap {
  border: 1px solid var(--borderColor);
  border-radius: 8px;
  overflow: hidden;
}
</style>
